import React, { PureComponent } from 'react';
import { Avatar } from 'antd';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import { NavLink } from 'react-router-dom';
import userIcon from '../../assets/images/svg/user.svg';
import levelIcon from '../../assets/images/svg/award.svg';
import setIcon from '../../assets/images/svg/settings.svg';
import outIcon from '../../assets/images/svg/power.svg';
import {
  HeaderWrapper,
  Logo,
  Nav,
  NavItem,
  Search,
  UserBox,
  SearchBox
} from './style';

class Header extends PureComponent {
  getSearchLists() {
    const { searchOverlay, searchTags } = this.props
    if (searchOverlay === 'open') {
      return (
        <div className="search-hot">
          <div className="title flex-row">
            <i className="niceicon niceremensousuo"></i>
            <span>热门搜索</span>
          </div>
          <ul className="tags">
            {
              searchTags.map(item => {
                return (
                  <li key={item.get('first')}>
                    <span className="btn">{item.get('first')}</span>
                  </li>
                )
              })
            }
          </ul>
        </div>
      )
    } else {
      return null
    }
  }

  render() {
    const { searchOverlay, openSearchOverlay, closeSearchOverlay, searchTags } = this.props
    return (
      <HeaderWrapper className="shadow">
        <div className="container flex-row">
          <NavLink to="/">
            <Logo />
          </NavLink>
          <Nav className="flex-row">
            <NavItem>
              <NavLink to="/" exact>
                发现音乐
              </NavLink>
            </NavItem>
            <NavItem>
              <NavLink to="/rank" exact>
              排行榜
              </NavLink>
            </NavItem>
            <NavItem>歌单</NavItem>
            <NavItem>歌手</NavItem>
            <NavItem>视频</NavItem>
            <NavItem>MV</NavItem>
          </Nav>
          <Search>
            <i className="niceicon nicesearch-o" onClick={() => openSearchOverlay(searchTags)}></i>
          </Search>
          <UserBox>
            <div className="line"></div>
            {
              this.props.isLogin ?
                <div className="is-login flex-row">
                  <div className="avatar-box flex-center">
                    <Avatar className="avatar" size={32} shape="circle" src="https://gravatar.loli.net/avatar/?s=32&d=https%3A%2F%2Fapollo.1.demo.nicetheme.xyz%2Fwp-content%2Fuploads%2F2019%2F08%2F1565707682.png&r=g" />
                    <div className="user-dropdown">
                      <ul>
                        <li>
                          <a href="/user" className="flex-row">
                            <img src={userIcon} alt="个人主页" />
                          个人主页
                        </a>
                        </li>
                        <li>
                          <a href="/level" className="flex-row">
                            <img src={levelIcon} alt="我的等级" />
                          我的等级
                        </a>
                        </li>
                        <li>
                          <a href="/set" className="flex-row">
                            <img src={setIcon} alt="个人设置" />
                          个人设置
                        </a>
                        </li>
                        <li>
                          <a href="/out" className="flex-row">
                            <img src={outIcon} alt="退出登录" />
                          退出登录
                        </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
                :
                <div className="no-login flex-row"> 登录 </div>
            }
          </UserBox>
          <SearchBox className={searchOverlay}>
            <div className="overlay" onClick={closeSearchOverlay}></div>
            <div className="search-body">
              <div className="search-content">
                <div className="search-popup-cover">
                  <div className="bg-effect">
                    <span className="layer"></span>
                  </div>
                  <div className="search-form">
                    <input
                      className="text"
                      type="text"
                      placeholder="请输入搜索关键词并按回车键…" />
                  </div>
                </div>
                {this.getSearchLists()}
              </div>
              <div className="btn-close flex-center">
                <span className="close-light" onClick={closeSearchOverlay}></span>
              </div>
            </div>
          </SearchBox>
        </div>
      </HeaderWrapper>
    )
  }

  componentDidMount() {
    this.props.getSearchTagList()
  }
}

const mapStateToProps = (state) => {
  return {
    searchOverlay: state.getIn(['header', 'searchOverlay']),
    isLogin: state.getIn(['header', 'isLogin']),
    searchTags: state.getIn(['header', 'searchTags'])
  }
}

const mapDispathToProps = (dispatch) => {
  return {
    getSearchTagList() {
      const action = actionCreators.getSearchTagList();
      dispatch(action);
    },
    openSearchOverlay(list) {
      dispatch(actionCreators.openSearchOverlay())
    },

    closeSearchOverlay() {
      dispatch(actionCreators.closeSearchOverlay())
    }
  }
}

export default connect(mapStateToProps, mapDispathToProps)(Header);